<template>
<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				添加群聊
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="search">
			<view class="flexBox">
				<image src="../../../static/jingjie/search.png" mode=""></image>
				<input type="text"  placeholder="查询群名称" v-model="userNickName" @blur="getGroupInfo" value=""/>
			</view>
			<view class="state1" @tap="getGroupInfo">搜索</view>
		</view>
		
			
		<view >
			<view class="body_active" v-for="(item,index) in allUserList" :key='index'>
				<view class="body_active_item">
					<view class="body_active_left">
						<image class="headImg" :src="item.faceUrl" ></image>
					</view>
					<view class="body_active_mid">
						<text class="nickname" >{{item.group_name}}</text>
					</view>
					<view class="body_active_right" >
						<view class="time" v-text="item.create_time"></view>
						<view class="state1" @tap="applyJoinGroup(item.group_id)">添加</view>
					</view>
					<view class="bottomborder">
			
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js'
	export default {
		data() {
			return {
				userNickName:'',
				page:1,
				// groupAllId : '',
				allUserList:[],//所有群聊列表
			};
		},
		methods:{
			
			
			//搜索群
			//读取群组基本资料-高级接口
			 getGroupInfo  () {
				var that = this
				 if (this.userNickName!='') {
				 	var data = {
				 		 'group_name' : this.userNickName,
						 'status' : 1
				 	 }
				 	 this.myAjaxNew({
				 		model: 'message',
				 		controllerName: 'messageGroup',
				 		actionName: 'query',
				 		data: data,
				 		successBack: function(res) {
							// that.groupAllId = res.data.data
							that.allUserList = res.data.data
							console.log(that.allUserList)
							if(res.data.data.length==0){
								uni.showToast({
									title:'没有符合条件的群',
									icon:'none'
								})
							}
							//群详细信息，可加载群头像，未实现
// 							for(var i in res.data.data){
// 								// console.log(res.data.data[i].group_id)
// 								var a =  res.data.data[i].group_id
// 								groupAllId.push({
// 									"groupID"  : a
// 								})
// 							}
// 							that.groupAllId = groupAllId
							// console.log(that.groupAllId)
// 							var options = {
// 								'GroupIdList': [
// 									"@TGS#2C57TPZFS",
// 								],
// 								'GroupBaseInfoFilter': [
// 									'Type',
// 									'Name',
// 									'Introduction',
// 									'Notification',
// 									'FaceUrl',
// 									'CreateTime',
// 									'Owner_Account',
// 									'LastInfoTime',
// 									'LastMsgTime',
// 									'NextMsgSeq',
// 									'MemberNum',
// 									'MaxMemberNum',
// 									'ApplyJoinOption'
// 								],
// 								'MemberInfoFilter': [
// 									'Account',
// 									'Role',
// 									'JoinTime',
// 									'LastSendMsgTime',
// 									'ShutUpUntil'
// 								]
// 							};
// 							webim.getGroupInfo(
// 									options,
// 									function (resp) {
// 										// console.log(resp);
// 										var a=resp.GroupInfo[0].ErrorCode
// 										if(a!==0){
// 											uni.showToast({
// 												title: '没有该群聊，请检查输入是否正确',
// 												icon: 'none'
// 											})
// 										}else{
// 											that.allUserList = resp.GroupInfo
// 										}
// 										
// 									},
// 									function (err) {
// 										// console.log(err);
// 									}
// 							);
								//群详细信息，可加载群头像，未实现
															
				 			// that.thisUser = res.data.data
				 			// console.log(res.data.group_id)
				 		}
				 	})
				 }
				 
				 // console.log(group_id)
				 // for (var i in t.groupAllId){
					 // group_id = this.groupAllId[0].groupID
				// console.log(group_id) 
		
				 // }
			},
			//申请加群
			applyJoinGroup  (groupIDs) {
				var groupThis = groupIDs
				var loginInfo=uni.getStorageSync('loginInfo')
				var b=loginInfo.identifier+""
			    uni.navigateTo({
			    	url: '/pages/Friend/applyFor/applyFor?item='+ groupThis +'&identifier='+ b +'&type=group'
			    })
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
		
	}
</script>
<style scoped>
.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 150upx;
	}

	.search {
		margin-top: 20upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		padding: 0 24upx;
		box-sizing: border-box;
		width: 100%;
		font-size: 32upx;
	}

	.search image {
		width: 32upx;
		height: 32upx;
		padding-left: 24upx;
		margin-right: 10upx;
	}

	.body {
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.body_item {
		display: flex;
		align-items: center;
		padding: 28upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.body_item_left {
		width: 56upx;
		height: 56upx;
		margin-right: 34upx;

	}

	.body_item_right {
		width: 18upx;
		height: 32upx;

	}

	.body_item_mid {
		display: flex;
		flex-direction: column;
		color: #333333;
		font-size: 32upx;
	}

	.body_item_mid text {
		font-size: 24upx;
		color: #999999;
		padding-top: 14upx;
	}

	.body_right {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}
	.body_active {
		margin-top: 20upx;
	}
	.body_active_item {
		background: #FFFFFF;
		padding: 24upx 24upx;
		display: flex;
		position: relative;
	}
	
	.body_active_left {
		position: relative;
	}
	
	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 28upx;
	}
	
	.country {
		height: 36upx;
		width: 36upx;
		position: absolute;
		left: 0upx;
		bottom: 0upx;
	}
	
	.body_active_mid {
		display: flex;
		flex-direction: column;
		margin-left: 15upx;
	}
	
	.body_active_mid text {
		text-align: center;
		max-width: 415upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin:auto auto;
	}
	
	.nickname {
		color: #333333;
		font-size: 32upx;
		line-height: 56upx;
		display: block;
	}
	
	.body_active_right {
		position: absolute;
		right: 24upx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.time {
		color: #CCCCCC;
		font-size: 24upx;
		margin-bottom: 18upx;
		display: flex;
		flex-direction: row-reverse;
	}
	.flexBox{
		display: flex;
		align-items: center;
	}
	.state1 {
		width: 100upx;
		height: 58upx;
		background: #46CECF;
		color: #FFFFFF;
		line-height: 58upx;
		text-align: center;
		font-size: 26upx;
		border-radius: 10upx;
	}
	
	.state2 {
		font-size: 26upx;
		color: #999999;
	}
	
	.bottomborder {
		position: absolute;
		width: 600upx;
		border-bottom: 1upx solid #E6E6E6;
		bottom: 1upx;
		right: 0;
	}
</style>
